﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DHAA.Areas.Administrator.Models.ProductModels>" %>

<%
    Ajax.BeginForm("Edit", "Product", FormMethod.Post,
                   new AjaxOptions
                       {
                           UpdateTargetId = "fancybox-content",
                           LoadingElementId = "loadingIcon",
                           OnBegin = "MvcFormOnBegin",
                           OnSuccess = "MvcFormOnSuccess",
                           OnComplete = "MvcFormOnComplete",
                           OnFailure = "MvcFormOnFailure"
                       }, new { enctype = "multipart/form-data" });
    {
%>
<%= Html.ValidationSummary(true) %>
<fieldset style="width: 640px">
    <legend>Create New Product</legend>
    <div class="Message Error"><%= ViewData["MessageError"] %></div>
    <div class="Message Success"><%= ViewData["MessageSuccess"] %></div>
            <%= Html.HiddenFor(model => model.CategoryID) %>
            
              <div class="editor-label">
                <%= Html.LabelFor(model => model.CategoryName) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.CategoryName, new { disabled = "disabled" })%>
                <%= Html.ValidationMessageFor(model => model.CategoryName) %>
            </div>                    
            <div class="editor-label">
                <%= Html.LabelFor(model => model.ProductName) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.ProductName) %>
                <%= Html.ValidationMessageFor(model => model.ProductName) %>
            </div>
            
                      <div class="editor-label">
                <%= Html.LabelFor(model => model.ProductImage) %>
            </div>
            <div class="editor-field">
                              <div id="preview">
       <% if (Html.DisplayTextFor(model=>model.ProductImage).ToString() != "")
{
    %>
        <img src="<%=ResolveUrl("~/Default/Imagesproduct/")%><%= Html.DisplayTextFor(model=>model.ProductImage) %>" alt="<%=Model.CategoryName %>"/>
    <%
}else{ %>
<img src="<%=ResolveUrl("~/Content/images/")%>noImage.jpg" alt="No image"/>


<%} %>
 </div>    <div id="file-uploader-demo1">
            <noscript>
                <p>
                    Please enable JavaScript to use file uploader.</p>
                <!-- or put a simple form for upload here -->
            </noscript>
        </div>
        <%= Html.HiddenFor(model => model.ProductImage, new {id = "imageText"}) %>
        <%= Html.ValidationMessageFor(model => model.ProductImage)%>
    </div>
                
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Price) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Price)%>
                <%= Html.ValidationMessageFor(model => model.Price) %>
            </div>
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Description) %>
            </div>
            <div class="editor-field">
                <%= Html.TextAreaFor(model => model.Description,new {style="width:90%; height:250px"}) %>
                <%= Html.ValidationMessageFor(model => model.Description) %>
            </div>
            
                   
          
            
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

   
<link href="<%= ResolveUrl("~/Scripts/fileuploader.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= ResolveUrl("~/Scripts/fileuploader.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    //  $(document).ready(function() {


    var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader-demo1'),
        action: '<%=Url.Action("Upload","Category") %>',
        multiple: false,
        allowedExtensions: ['jpg', 'png', 'gif'],
        debug: true,
        //        sizeLimit: 1024000,
        //        minSizeLimit: 0,    
        onComplete: function(id, fileName, responseJSON) {
            $('#preview img').attr('src', '<%=ResolveUrl("~/Default/Imagesproduct/")%>' + fileName);
            $('#imageText').val(fileName);
        },
        messages: {
            typeError: "{file} has invalid extension. Only {extensions} are allowed.",
            sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
            minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
            emptyError: "{file} is empty, please select files again without it.",
            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."
        },
        showMessage: function(message) {
            alert(message);
        }
        /*
        onSubmit: function(id, fileName){},
        onProgress: function(id, fileName, loaded, total){},
        onComplete: alert('OK')
        onCancel: function(id, fileName){},
        */
    });
             
              
    </script>

       <script type="text/javascript">
          function initMCE() {
              
          tinyMCE.init({
                        // General options
                        mode: "textareas",
                        theme: "advanced",
                        plugins: "autolink,lists,style,layer,table,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                        // Theme options
                        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
                        theme_advanced_toolbar_location: "top",
                        theme_advanced_toolbar_align: "left",
                        //theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing: true,
dialog_type : "modal",
                        // Skin options
                        skin: "o2k7",
                        skin_variant: "silver",

                        // Example content CSS (should be your site CSS)
                        content_css: "<%= ResolveUrl("~/Content/style.css")%>",

                        // Drop lists for link/image/media/template dialogs
                        template_external_list_url: "js/template_list.js",
                        external_link_list_url: "js/link_list.js",
                        external_image_list_url: "js/image_list.js",
                        media_external_list_url: "js/media_list.js"

                   
                    });
             }
          
          $(document).ready(function() {
              //initMCE();
          });
          
</script>
